Embedded Flow

The embedded flow shows the login screen in a modal iframe inside your app, so the user never leaves the page. The session comes back over postMessage. You drive it with the AbairAuth client library.

---

Using the client library

Load the script (an ES-module build is also published for bundlers):

<script src="https://auth.abair.ie/dist/abair-auth-client.min.js"></script>

Initialise once, then call authenticate() to open the popup and await the session:

const authClient = new AbairAuth({
  authUrl: "https://auth.abair.ie/embedded",
  supabaseUrl: "https://<project>.supabase.co",
  supabaseKey: "<publishable key>",   // publishable / anon key only
  width: 500,
  height: 600,
}).init();

try {
  const session = await authClient.authenticate();
  await supabase.auth.setSession({
    access_token: session.access_token,
    refresh_token: session.refresh_token,
  });
} catch (err) {
  // user cancelled, or authentication failed
}

Options

Option	Default	Purpose
authUrl	https://auth.abair.ie/embedded	Login page to embed
supabaseUrl / supabaseKey	—	Your Supabase project URL and publishable key
width / height	600 × 800	Popup size, in pixels
additionalParams	—	Extra query parameters forwarded to the popup

Methods

• init() — start listening for the popup's messages (call once; chainable).
• authenticate() — open the popup; resolves with the session, rejects if the user cancels or authentication fails. Pass { forceLogin: true } to force a fresh attempt.
• close() / destroy() — dismiss the popup / tear down listeners.

---

Message contract

If you embed the login page directly instead of using the library, it communicates over postMessage:

• Popup → your page: { type: "AUTH_SUCCESS", session: { access_token, refresh_token } } on success, or { type: "AUTH_ERROR", error } on failure.
• Your page → popup: { type: "CLOSE_AUTH" } to dismiss the popup and sign the user out.

The popup forces a fresh login each time it opens, and validates the origin of the messages your page sends it.

---

Sequence

---

Security

warning

The popup broadcasts the successful session to its parent page without restricting the parent origin. Only embed the login popup in pages you control.